<template>
  <div class="contain">
    <NavBar title="预约历史"></NavBar>
    <!-- <van-search v-model="value" placeholder="请输入预约电话进行搜索" /> -->
    <div class="indent-box" v-if="data.length !== 0">
      <IndentCard
        class="card"
        :indentData="item"
        v-for="(item, index) in data"
        :key="index + 'c'"
        @upList="getList()"
      ></IndentCard>
    </div>
    <NullState v-else> </NullState>
  </div>
</template>
<script>
import NavBar from "@/components/NavBar.vue";
import { getYySeeTimeList, getInitDataList } from "@/api/user";
import IndentCard from "@/components/IndentCard.vue";
import NullState from "@/components/NullState.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      temp: {},
      value: "",
      radio: "1",
      data: [],
      timeData: [],
      showPicker: false,
    };
  },
  components: {
    NavBar,
    IndentCard,
    NullState,
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  mounted() {
    this.sysData();
  },
  methods: {
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      const month = date.getMonth() + 1; // getMonth() 返回的月份从0开始，所以需要加1
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      // 格式化成 8-28 9:02 这种形式
      const formattedDate = `${month}.${day} ${hours}:${minutes
        .toString()
        .padStart(2, "0")}`;

      return formattedDate;
    },
    getList() {
      var reqData = {
        yyUserId: this.userInfo.yyUserId,
      };
      getYySeeTimeList(reqData).then((res) => {
        if (res.data.state === 0) {
          res.data.data.forEach((item) => {
            // 转换 dateDay
            if (item.dateDay) {
              item.dateDayStr = this.formatTimestampToDate(item.dateDay);
            }
            // 转换 regTime
            if (item.regTime) {
              item.regTime = this.formatTimestamp(item.regTime);
            }
            if (item.timeSlot) {
              item.timeSlotZW = this.findName(item.timeSlot, this.timeData);
            }
          });
          this.data = res.data.data;
          console.log(this.data);
        } else {
          this.data = [];
        }
      });
    },
    formatTimestampToDate(timestamp) {
      const date = new Date(timestamp);
      const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 确保月份为两位数
      const day = date.getDate().toString().padStart(2, "0"); // 确保日期为两位数

      // 格式化成 YYYY-MM-DD 形式
      const formattedDate = `${month}-${day}`;

      return formattedDate;
    },
    findName(e, array) {
      const item = array.find((item) => item.dataCode === e);
      return item ? item.dataName : null;
    },
    sysData() {
      var reqData = {
        supperCode: "TIME_SLOT",
      };
      getInitDataList(reqData).then((res) => {
        this.timeData = res.data.data;
        this.getList();
      });
    },
    formatTimeRange(timeString) {
      // 手动设置开始时间
      const startTime = "11.30";
      // 提取时间字符串中的小时和分钟部分
      const [hours, minutes] = timeString.split(":");
      // 格式化结束时间为 "16.00" 这种格式
      const formattedEndTime = `${hours}.${minutes}`;
      // 返回 "11.30 - 16.00" 的格式
      return `${startTime} - ${formattedEndTime}`;
    },
    isShow(e) {
      this.type = e;
      this.showPicker = true;
    },
    onConfirm(time) {
      if (this.type === "star") {
        this.temp.starTime = time;
      } else if (this.type === "end") {
        this.temp.endTime = time;
      }
      this.showPicker = false;
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.contian {
  width: 100%;
  min-height: 100vh;
  padding: 0 0 144px;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  z-index: 0;
}

.indent-box {
  padding: 24px;
}
.indent-box .card {
  margin-top: 20px;
}
.indent-box .card:nth-child(1) {
  margin-top: 0 !important;
}
</style>
